{extend name="common/base"}
{block name="data_type"}widgets{/block}

{block name="content"}
<style>
    .son_row {margin-left: 10px!important;}
    .parent_row {border:1px solid #ccc; margin-top: 10px;}
    .parent_row , .son_row , .guige_xiang {padding: 5px}

    .guige_xiang {margin-left: 0px!important; height: 40px; line-height: 40px}
    .guige_xiang input , .guige_xiang button {height: 35px;display: block;float: left}
    .guige_xiang_input {width: 50px;}
    .guige_xiang_wrapper {float: left!important;}
</style>
<div class="row-content am-cf guige_page">

    <div class="row">

        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title am-fl">产品规格管理</div>

                    <div class="widget-function am-fr">
                        <a href="javascript:;" class="am-icon-cog"></a>
                    </div>
                </div>

                <div class="widget-body am-fr">
                    <button type="button" id="add_guige">添加产品规格</button>
                    <div id="guige_display">
                        {foreach name="guige" id="v1" key="k1"}
                        <div class="row parent_row">
                            <input type="text" name="name[]" placeholder="规格名称" data-guige-id="{$v1.guige_id}" data-pid="{$v1.pid}" value="{$v1.name}">
                            <button type="button" class="add_guige_xiang" data-guige-id="{$v1.guige_id}">添加规格项</button>
                            <button type="button" class="add_guige_son" data-pid="{$v1.guige_id}">添加子规格</button>
                            <button type="button" class="del_guige" data-id="{$v1.guige_id}">删除规格</button>

                            <div class="row guige_xiang">
                            {if isset($v1['attr'])}
                                {foreach name="v1['attr']" id="v2" key="k2"}
                                <div class="guige_xiang_wrapper am-u-sm-2">
                                    <input type="text" class="guige_xiang_input" name="attr_value[]" value="{$v2.attr_value}" data-attr-id="{$v2.attr_id}" data-guige-id="{$v1.guige_id}">
                                    <button type="button" class="guige_attr_del" data-attr-id="{$v2.attr_id}">删</button>
                                </div>
                                {/foreach}
                            {/if}
                            </div>

                            {if isset($v1['son'])}
                            {foreach name="v1['son']" id="v2" key="k2"}
                                <div class="row son_row">
                                    <input type="text" name="name[]" placeholder="规格名称" data-guige-id="{$v2.guige_id}" data-pid="{$v2.pid}" value="{$v2.name}">
                                    <button type="button" class="add_guige_xiang" data-guige-id="{$v2.guige_id}">添加规格项</button>
                                    <button type="button" class="add_guige_son" data-pid="{$v2.guige_id}">添加子规格</button>
                                    <button type="button" class="del_guige" data-id="{$v2.guige_id}">删除规格</button>
                                    <div class="row guige_xiang">
                                        {if isset($v1['attr'])}
                                        {foreach name="v2['attr']" id="v3" key="k3"}
                                        <div class="guige_xiang_wrapper am-u-sm-2">
                                            <input type="text" class="guige_xiang_input" name="attr_value[]" value="{$v3.attr_value}" data-attr-id="{$v3.attr_id}" data-guige-id="{$v2.guige_id}">
                                            <button type="button" class="guige_attr_del" data-attr-id="{$v3.attr_id}">删</button>
                                        </div>
                                        {/foreach}
                                        {/if}
                                    </div>
                                    {if isset($v2['son'])}
                                    {foreach name="v2['son']" id="v3" key="k3"}
                                    <div class="row son_row">
                                        <input type="text" name="name[]" placeholder="规格名称" data-guige-id="{$v3.guige_id}" data-pid="{$v3.pid}" value="{$v3.name}">
                                        <button type="button" class="add_guige_xiang" data-guige-id="{$v3.guige_id}">添加规格项</button>
                                        <button type="button" class="add_guige_son" data-pid="{$v3.guige_id}">添加子规格</button>
                                        <button type="button" class="del_guige" data-id="{$v3.guige_id}">删除规格</button>
                                        <div class="row guige_xiang">
                                            {if isset($v2['attr'])}
                                            {foreach name="v3['attr']" id="v4" key="k4"}
                                            <div class="guige_xiang_wrapper am-u-sm-2">
                                                <input type="text" class="guige_xiang_input" name="attr_value[]" value="{$v4.attr_value}" data-attr-id="{$v4.attr_id}" data-guige-id="{$v3.guige_id}">
                                                <button type="button" class="guige_attr_del" data-attr-id="{$v4.attr_id}">删</button>
                                            </div>
                                            {/foreach}
                                            {/if}
                                        </div>
                                    </div>
                                    {/foreach}
                                    {/if}
                                </div>
                            {/foreach}
                            {/if}
                        </div>
                        {/foreach}
                    </div>
                </div>

            </div>
        </div>

        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-body am-fr">
                    <button type="button" id="reflash">刷新规格属性</button>
                </div>
                <form action="{:url('guding_store')}" method="post">
                    <input type="hidden" name="product_id" value="{$Think.get.id}">
                <div class="am-form-group" id="guige-table-box">

                </div>
                    <button>保存修改</button>
                </form>
            </div>

            </div>
        </div>
    </div>
</div>
{/block}
{block name="footer_js"}
<script src="__STATIC__assets/js/table.js"></script>
<script>
    $(function () {
    // 点击添加规格按钮触发事件
    $('.guige_page').on('click' , '#add_guige' , function() {
        $.ajax({
            url : 'guige_add',
            data : 'product_id='+$('[name=product_id]').val()+'&pid=0',
            success : function (res) {
                $('#guige_display').append(`<div class="row parent_row">
                            <input type="text" name="name[]" placeholder="规格名称" data-guige-id="`+res.guige_id+`" data-pid="0">
                            <button type="button" class="add_guige_xiang" data-guige-id="`+res.guige_id+`">添加规格项</button>
                            <button type="button" class="add_guige_son" data-pid="`+res.guige_id+`">添加子规格</button>
                            <button type="button" class="del_guige" data-id="`+res.guige_id+`">删除规格</button>
                            <div class="row guige_xiang"></div>
                        </div>`);
            }
        });

    });
    $('.guige_page').on('click' , '.add_guige_son' , function() {
        var _this = $(this)
        $.ajax({
            url: 'guige_add',
            data: 'product_id=' + $('[name=product_id]').val() + '&pid=' + _this.data('pid'),
            success: function (res) {
                $(_this[0].parentNode).append(`<div class="row son_row">
                            <input type="text" name="name[]" placeholder="规格名称" data-guige-id="`+res.guige_id+`" data-pid="`+ _this.data('pid')+`">
                            <button type="button" class="add_guige_xiang" data-guige-id="`+res.guige_id+`">添加规格项</button>
                            <button type="button" class="add_guige_son" data-pid="`+res.guige_id+`">添加子规格</button>
                            <button type="button" class="del_guige" data-id="`+res.guige_id+`">删除规格</button>
                            <div class="row guige_xiang"></div>
                        </div>`);
            }
        });
    });

    $('.guige_page').on('click' , '.add_guige_xiang' , function() {
        var _this = $(this)
        $.ajax({
            url: 'guige_xiang_add',
            data: 'product_id=' + $('[name=product_id]').val() + '&guige_id=' + _this.data('guige-id'),
            success: function (res) {
                $(_this[0].parentNode).find('.guige_xiang').eq(0).append(`<div class="guige_xiang_wrapper am-u-sm-2">
                                    <input type="text" class="guige_xiang_input" name="attr_value[]"  data-attr-id="`+res.attr_id+`" data-guige-id="`+_this.data('guige-id')+`">
                                    <button type="button" class="guige_attr_del"data-attr-id="`+res.attr_id+`" >删</button>
                                </div>`);
            }
        });
    });




    $('.guige_page').on('change' , '[name="name[]"]' , function() {
        var names = [];
        $('[name="name[]"]').each(function(i) {
            names[i] = {'name':$(this).val() , 'guige_id':$(this).data('guige-id') , 'pid':$(this).data('pid')};
        })
        names = JSON.stringify(names)
        $.ajax({
            url : 'guige_store',
            data : 'name='+names,
        })
    })

    $('.guige_page').on('change' , '[name="attr_value[]"]' , function() {
        var names = [];
        $('[name="attr_value[]"]').each(function(i) {
            names[i] = {'attr_value':$(this).val() , 'attr_id':$(this).data('attr-id') };
        })
        names = JSON.stringify(names)

        $.ajax({
            url : 'guige_attr_store',
            data : 'name='+names,
        })
    })


    $('.guige_page').on('click' , '.del_guige' , function () {
        var _this = $(this)
        var id = $(this).data('id')
        $.ajax({
            url : 'guige_del',
            data : 'guige_id='+id,
            success : function (res) {
                $(_this[0].parentNode).remove()
            }
        })
    });
    $('.guige_page').on('click' , '.guige_attr_del' , function () {
        var _this = $(this)
        var id = $(this).data('attr-id')
        $.ajax({
            url : 'guige_attr_del',
            data : 'attr_id='+id,
            success : function (res) {
                $(_this[0].parentNode).remove()
            }
        })
    })
    })

    $('#reflash').click(function () {
        var list = [];
        $('[name="name[]"]').each(function () {
            var tmp_obj = {};
            tmp_obj.name = $(this).val()
            var guige_xiang  = $(this).parent().find('.guige_xiang').eq(0)
            var _vals = [];
            guige_xiang.find('[name="attr_value[]"]').each(function () {
                _vals.push($(this).val())
            })
            tmp_obj.vals = _vals;
            list.push(tmp_obj)
        })


        var a = {
            list:list,
            showId : 'guige-table-box',
            tableClass : "am-table am-table-bordered",
            thClass : '',
            trClass : '',
            tdClass: '',
        }
        __TABLE.init(a);
    })
</script>
{/block}